<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html>
<html>
<head>
<title></title>
<jsp:include page="../inc.jsp"></jsp:include>
<script type="text/javascript">
	var NumberCombobox;
	var tmp = new Array();
	var logicName = new Array();
	var logicHeat = new Array();
	var logicHeatChart = '${logicHeatChart}';
	//console.info(logicHeatChart)
	var data = $.parseJSON( logicHeatChart ); 
	//console.info(data)
	var sortable = [];
	for (var key in data) {
	    sortable.push([key, data[key]]);
	}
	sortable.sort(function(a, b) {
	    return a[1] - b[1];
	});
	
	//console.info(sortable.length)
	//console.info(sortable[sortable.length])
	var i = sortable.length-1;
	var j = 0;
	for (; i>=0;--i) {
		//console.info(sortable[i])
		//tmp = sortable[i]
		//console.info(tmp[0])
		logicName[j] = sortable[i][0];
		logicHeat[j] = sortable[i][1];
		j=j+1;
	}
	// 调试使用
	//console.info(logicName)
	//console.info(logicHeat)
	
	
	$(function() {
		$('#container').highcharts({
			credits : {
				enabled : false
			},
			chart : {
				alignTicks: true,//自动计算y轴数值
				//backgroundColor: '#A35393',//背景颜色
				height: 550,//图形高度
				borderRadius: 20,//圆角边框 
				borderWidth: 5,//边框宽度
				//width:800,//图形宽度
				ignoreHiddenSeries:true,//自动调整剩余的数据轴
				//inverted:true,//x轴跟y轴位置互换
				panning: true,//图形放大时，按shift键拖动图形
				panKey: 'shift',
				zoomType: 'x',//图形沿x轴放大
				plotShadow:true,//设置图形区域阴影
				shadow:true,//向下投影
				type : 'column',
				animation:{//动画效果      
					duration: 0,      
					easing: 'easeOutBounce'   
				},
				margin : [ 50, 50, 150, 80 ]
			},
			title : {
				text : 'logic点记率分布'
			},
			xAxis : {
				categories : logicName,
				labels : {
					rotation : -45,
					align : 'right',
					style : {
						fontSize : '13px',
						fontFamily : 'Verdana, sans-serif'
					}
				}
			},
			yAxis : {
				min : 0,
				title : {
					text : 'logic点击率'
				}
			},
			legend : {
				enabled : false
			},
			tooltip : {
				formatter : function() {
					return '<b>' + this.x + '</b><br/>' + '此logic点击率为: ' + this.y + '次';
				}
			},
			series : [ {
				data : logicHeat,
				dataLabels : {
					enabled : true,
					rotation : -90,
					color : '#FFFFFF',
					align : 'right',
					x : 4,
					y : 10,
					style : {
						fontSize : '13px',
						fontFamily : 'Verdana, sans-serif'
					}
				}
			} ]
		});
		
		NumberCombobox = $('#NumberCombobox').combobox({
			url : '${pageContext.request.contextPath}/charts/number.json',
			valueField : 'id',
			textField : 'number',
			panelHeight : 'auto',
			mode : 'remote',
			delay : 300,
			onSelect: function(rec){
			    var url = '${pageContext.request.contextPath}/chartController/logicHeatChart?number='+rec.number;
			    console.info(url)
			    parent.$('#index_tabs').tabs('getSelected').panel('options').href = url;
			    var index = parent.$('#index_tabs').tabs('getTabIndex', parent.$('#index_tabs').tabs('getSelected'));
			    parent.$('#index_tabs').tabs('getTab', index).panel('refresh');
		    }
		});

		parent.$.messager.progress('close');
	});
</script>
</head>
<body>
	<div class="easyui-layout" data-options="fit : true,border : false">
		<div data-options="region:'center',border:false">
			<!--  <input  id = "NumberCombobox" name="number" value="10"/>   -->
			<div id="container"></div>
		</div>
	</div>
</body>
</html>